import { Card } from "@/components";
import { Button } from "antd";
import { useEffect, useState } from "react";
import {
  SpeedGauge,
  Battery,
  LineChart,
  AngleChart,
  Indicator,
  GaugeChart,
  RotationSpeed,
  DeviceInfo,
} from "@/components";

import BatteryCard from './BatteryCard';

export default function Operation() {
  const list = [
    { time: "11:30", value: 400 },
    { time: "11:31", value: 932 },
    { time: "11:32", value: 700 },
    { time: "11:33", value: 360 },
    { time: "11:34", value: 800 },
    { time: "11:35", value: 400 },
    { time: "11:36", value: 932 },
    { time: "11:37", value: 650 },
    { time: "11:38", value: 360 },
    { time: "11:39", value: 540 },
  ];

  const gaugeData = [{ value: 50 }];

  const [device, setDevice] = useState<string>("battery");
  const [deviceInfo, setDeviceInfo] = useState<Array<object>>([]);
  const [title, setTitle] = useState<string>("电池信息");
  const VCUInfo = [
    { title: "24V欠压", value: "---" },
    { title: "24V过压", value: "---" },
    { title: "油门开度", value: "---" },
    { title: "制动开度", value: "---" },
  ];
  const batteryInfo = [
    { title: "最高单体电压", value: "---" },
    { title: "最低单体电压", value: "---" },
    { title: "电池最高温度", value: "---" },
    { title: "电池最低温度", value: "---" },
    { title: "正极绝缘阻值", value: "---" },
    { title: "负极绝缘阻值", value: "---" },
  ];
  const motorInfo = [
    { title: "IGBT温度", value: "---" },
    { title: "报文计数", value: "---" },
    { title: "故障等级", value: "---" },
    { title: "故障码", value: "---" },
  ];
  const renderContent = () => {
    switch (device) {
      case "battery":
        return (
          <>

            <div className=" h-48">
              <GaugeChart title="电池组电压" value={90}></GaugeChart>
            </div>
            <div className=" h-48">
              <GaugeChart title="电池组电压" value={90}></GaugeChart>
            </div>

            <div className=" h-48">
              <GaugeChart title="电池组电流" value={35}></GaugeChart>
            </div>
          </>
        );
      case "VCU":
        return <></>;
      case "motor":
        return (
          <>
            <div className=" h-48 flex">
              <GaugeChart title="电机转速" data={gaugeData}></GaugeChart>
              <GaugeChart title="电机转矩" data={gaugeData}></GaugeChart>
            </div>

            <div className=" h-48">
              <LineChart title="电机电流" data={list}></LineChart>
            </div>
            <div className=" h-48">
              <LineChart title="电机温度" data={list}></LineChart>
            </div>
          </>
        );
      case "status":
        return (
          <>
            <div className=" h-64 flex">
              <RotationSpeed title="左轮转速" data={gaugeData}></RotationSpeed>
              <RotationSpeed title="右轮转速" data={gaugeData}></RotationSpeed>
            </div>
          </>
        );
      default:
        return <p>Unkown</p>;
    }
  };

  useEffect(() => {
    if (device === "battery") {
      setTitle("电池信息");
      setDeviceInfo(batteryInfo);
    } else if (device === "motor") {
      setTitle("电机信息");
      setDeviceInfo(motorInfo);
    } else if (device === "VCU") {
      setTitle("VCU信息");
      setDeviceInfo(VCUInfo);
    } else if (device === "status") {
      setTitle("车辆状态");
      setDeviceInfo([]);
    }
  }, [device]);

  return (
    <div className="size-full border-2 border-rose-500 flex flex-row gap-4 p-4 page">
      <div className="w-1/5">
        <Card header={() => <h1>{title}</h1>}>
          {renderContent()}
          <DeviceInfo
            className={"grid-cols-2 gap-2 text-white"}
            children={deviceInfo.map((item) => {
              return (
                <p>
                  <strong>{item.title}：</strong>
                  <span>{item.value}</span>
                </p>
              );
            })}
          ></DeviceInfo>
        </Card>
      </div>

      <div className="w-3/5 flex flex-col">
        <div>111</div>
        <div className="flex-1">
          <Button
            type="primary"
            onClick={() => {
              setDevice("motor");
            }}
          >
            电机信息
          </Button>
          <Button
            type="primary"
            onClick={() => {
              setDevice("status");
            }}
          >
            车辆状态
          </Button>
          <Button type="primary">灯光状态</Button>
          <Button type="primary"> 冷却系统状态</Button>
          <Button
            type="primary"
            onClick={() => {
              setDevice("VCU");
            }}
          >
            VCU信息
          </Button>
          <Button
            type="primary"
            onClick={() => {
              setDevice("battery");
            }}
          >
            电池信息
          </Button>
        </div>
        <div>222</div>
      </div>

      <div className="w-1/5">
      <BatteryCard></BatteryCard>
        {/* <Card
          header={() => <h1>自定义头部</h1>}
          footer={() => <h1>自定义底部</h1>}
        >
          <div className="border-orange-400 border-2 border-solid h-60">
            <AngleChart></AngleChart>
          </div>
        </Card> */}
      </div>
    </div>
  );
}
